<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="styles.css">
		<script type="text/javascript" src="SpeedData.js"></script>
		<script type="text/javascript" src="speeds.js"></script>
	</head>

	<body>
		<div class="imagepreload">
			<img src="Icons/Archon.jpg">
			<img src="Icons/Baneling.jpg">
			<img src="Icons/Banshee.jpg">
			<img src="Icons/Battlecruiser.jpg">
			<img src="Icons/BroodLord.jpg">
			<img src="Icons/Broodling.jpg">	
			<img src="Icons/Burrow.jpg">
			<img src="Icons/Carrier.jpg">
			<img src="Icons/Changeling.jpg">
			<img src="Icons/Colossus.jpg">
			<img src="Icons/Corruptor.jpg">
			<img src="Icons/Creep.jpg">
			<img src="Icons/Drone.jpg">
			<img src="Icons/DT.jpg">
			<img src="Icons/Ghost.jpg">
			<img src="Icons/Hellion.jpg">
			<img src="Icons/HT.jpg">
			<img src="Icons/Hydralisk.jpg">
			<img src="Icons/Immortal.jpg">
			<img src="Icons/InfestedTerran.jpg">
			<img src="Icons/Infestor.jpg">
			<img src="Icons/Marauder.jpg">
			<img src="Icons/Marine.jpg">
			<img src="Icons/Medivac.jpg">
			<img src="Icons/MissileTurret.jpg">
			<img src="Icons/Mothership.jpg">
			<img src="Icons/Mule.jpg">
			<img src="Icons/Mutalisk.jpg">
			<img src="Icons/Observer.jpg">
			<img src="Icons/Overlord.jpg">
			<img src="Icons/Overseer.jpg">
			<img src="Icons/Phoenix.jpg">
			<img src="Icons/Probe.jpg">
			<img src="Icons/Queen.jpg">
			<img src="Icons/Raven.jpg">
			<img src="Icons/Reaper.jpg">
			<img src="Icons/Roach.jpg">
			<img src="Icons/SCV.jpg">
			<img src="Icons/Seeker.jpg">
			<img src="Icons/Sentry.jpg">
			<img src="Icons/SpineCrawler.jpg">
			<img src="Icons/SporeCrawler.jpg">
			<img src="Icons/Stalker.jpg">
			<img src="Icons/Stim.jpg">
			<img src="Icons/Tank-U.jpg">
			<img src="Icons/Thor.jpg">
			<img src="Icons/Ultralisk.jpg">
			<img src="Icons/Upgrade.jpg">
			<img src="Icons/Viking-A.jpg">
			<img src="Icons/Viking-G.jpg">
			<img src="Icons/VR.jpg">
			<img src="Icons/WarpPrism.jpg">
			<img src="Icons/Zealot.jpg">
			<img src="Icons/Zergling.jpg">
		</div>

		<div id="container">
			<div id="header" >
				<h1>SC2 Unit Speeds</h1>
			</div>
			
			<div id="chartpanel">
			<canvas id="speedchart" ></canvas>				
			</div>
						
			<div id="sidepanel">
			Show:<br>
			<input id="enableTerran" type="checkbox" checked><label id="bump" for="enableTerran">Terran</label><br>
			<input id="enableZerg" type="checkbox" checked><label id="bump" for="enableZerg">Zerg</label><br>
			<input id="enableProtoss" type="checkbox" checked><label id="bump" for="enableProtoss">Protoss</label><br>
			<hr>
			<input id="showUnupgraded" name="upgrades" type="radio" checked><label id="bump" for="showUnupgraded">No speed upgrades</label><br>			
			<input id="showUpgraded" name="upgrades" type="radio"><label id="bump" for="showUpgraded">All speeds upgraded</label><br>
			<input id="showBothUpgr" name="upgrades" type="radio"><label id="bump" for="showBothUpgr">Both</label><br>
			<div id="zergOptions">
				<hr>
				<input id="showOffCreepOnly" name="creep" type="radio" checked><label id="bump" for="showOffCreepOnly">All units off creep</label><br>
				<input id="showCreepOnly" name="creep" type="radio" ><label id="bump" for="showCreepOnly">All units on creep</label><br>			
				<input id="showOnAndOff" name="creep" type="radio"><label id="bump" for="showOnAndOff">Both</label><br>			
				<hr> <!-- Burrow -->
				<input id="showUnburrowed" name="burrow" type="radio" checked><label id="bump" for="showUnburrowed">All units unburrowed</label><br>
				<input id="showBurrowed" name="burrow" type="radio" ><label id="bump" for="showBurrowed">Burrow units if possible</label><br>			
				<input id="showBothBurr" name="burrow" type="radio"><label id="bump" for="showBothBurr">Both</label><br>
			</div>
			<div id="terranOptions">
				<hr> <!-- Stim -->
				<input id="showUnstimmed" name="stim" type="radio" checked><label id="bump" for="showUnstimmed">No stim</label><br>
				<input id="showStimmed" name="stim" type="radio" ><label id="bump" for="showStimmed">Stimmed</label><br>			
				<input id="showBothStim" name="stim" type="radio"><label id="bump" for="showBothStim">Both</label><br>			
			</div>
			<hr> <!-- IsAir -->
			<input id="showGroundOnly" name="air" type="radio"><label id="bump" for="showGroundOnly">Ground units only</label><br>
			<input id="showAirOnly" name="air" type="radio"><label id="bump" for="showAirOnly">Air units only</label><br>			
			<input id="showBothAir" name="air" type="radio" checked><label id="bump" for="showBothAir">Both</label><br>			
			</div>

			<div id="footer">
				<textarea id="DebugBox" cols="50" rows="10"></textarea><br>
				<textarea id="DebugBox2" cols="50" rows="10"></textarea><br>
			</div>
			</div>
		<script type="text/javascript">
			initialize();
		</script>
	</body>
</html>
